* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /*font-family: 'Poppins', sans-serif;*/

}

body {

    overflow: hidden;

}

section {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);

}

section .color {

    position: absolute;

    filter: blur(150px);

}

section .color:nth-child(1) {

    top: -350px;

    width: 600px;

    height: 600px;

    background: #8be887;

}

section .color:nth-child(2) {

    bottom: -150px;

    left: 100px;

    width: 500px;

    height: 500px;

    background: #fffd87;

}

section .color:nth-child(3) {

    bottom: 50px;

    right: 100px;

    width: 500px;

    height: 500px;

    background: #00d2ff;

}

.box {

    position: relative;

}

.box .square {

    position: absolute;

    backdrop-filter: blur(5px);

    box-shadow: 0 25px 45px rgb(0, 0, 0, 0.1);

    border: 1px solid rgb(255, 255, 255, 0.5);

    border-right: 1px solid rgb(255, 255, 255, 0.2);

    border-bottom: 1px solid rgb(255, 255, 255, 0.2);

    background: rgb(255, 255, 255, 0.1);

    border-radius: 10px;

    animation: animate 10s linear infinite;

    animation-delay: calc(-1s*var(--i));

}

/* 动画 */

@keyframes animate {

    0%,
    100% {

        transform: translateY(-40px);

    }

    50% {

        transform: translate(40px);

    }

}

.box .square:nth-child(1) {

    top: -50px;

    right: -60px;

    width: 100px;

    height: 100px;

}

.box .square:nth-child(2) {

    top: 150px;

    left: -100px;

    width: 120px;

    height: 120px;

    z-index: 2;

}

.box .square:nth-child(3) {

    bottom: 50px;

    right: -60px;

    width: 80px;

    height: 80px;

    z-index: 2;

}

.box .square:nth-child(4) {

    bottom: -80px;

    left: 100px;

    width: 50px;

    height: 50px;

}

.box .square:nth-child(5) {

    top: -90px;

    left: 140px;

    width: 60px;

    height: 60px;

}

.container {

    position: relative;

    width: 400px;

    min-height: 400px;

    background: rgb(255, 255, 255, 0.1);

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    backdrop-filter: blur(5px);

    box-shadow: 0 25px 45px rgb(0, 0, 0, 0.1);

    border: 1px solid rgb(255, 255, 255, 0.5);

    border-right: 1px solid rgb(255, 255, 255, 0.2);

    border-bottom: 1px solid rgb(255, 255, 255, 0.2);

}

.form {

    position: relative;

    height: 100%;

    width: 100%;

    padding: 40px;

}

.form h2 {

    position: relative;

    color: #fff;

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 40px;

}

.form h2::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 80px;

    height: 4px;

    background: #fff;

}

.form .inputBox {

    width: 100%;

    margin-top: 20px;

}

.form .login-btn {
    width: 100%;

    height: 40px;

    background: rgb(255, 255, 255, 0.2);

    border: none;

    outline: none;


    border-radius: 5px;

    border: 1px solid rgb(255, 255, 255, 0.5);

    border-right: 1px solid rgb(255, 255, 255, 0.2);

    border-bottom: 1px solid rgb(255, 255, 255, 0.2);

    font-size: 16px;

    letter-spacing: 1px;

    /* color: #fff; */

    box-shadow: 0 5px 15px rgb(0, 0, 0, 0.05);
}

.form .inputBox .addon {
    padding: 6px 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    background-color: #eee;
    width: 10%;

    background: rgb(255, 255, 255, 0.2);

    border: none;

    outline: none;


    border-radius: 5px 0 0 5px;

    border: 1px solid rgb(255, 255, 255, 0.5);

    border-right: 1px solid rgb(255, 255, 255, 0.2);

    border-bottom: 1px solid rgb(255, 255, 255, 0.2);

    font-size: 16px;

    letter-spacing: 1px;

    color: #838383;

    box-shadow: 0 5px 15px rgb(0, 0, 0, 0.05);
}

.form .inputBox input {

    width: 100%;

    height: 40px;

    background: rgb(255, 255, 255, 0.2);

    border: none;

    outline: none;

    padding: 10px 20px;

    border-radius: 5px;

    border: 1px solid rgb(255, 255, 255, 0.5);

    border-right: 1px solid rgb(255, 255, 255, 0.2);

    border-bottom: 1px solid rgb(255, 255, 255, 0.2);

    font-size: 16px;

    letter-spacing: 1px;


    box-shadow: 0 5px 15px rgb(0, 0, 0, 0.05);

}

.form .inputBox input::placeholder {

    color: #fff;

}
.form .re_pswd{
    margin-top: 9px;
}



.switch-field {
    display: flex;
    margin-bottom: 10px;
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    background: rgb(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    /* box-shadow:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked+label {
    background-color: #e0b9f157;
    box-shadow: none;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}
